<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
	<title>Smashing - Premium Admin Template</title>
	
	<!-- Meta -->
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
	<!-- Bootstrap -->
	<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="../../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
	
	<!-- Bootstrap Extended -->
	<link href="../../bootstrap/extend/jasny-bootstrap/css/jasny-bootstrap.min.css" rel="stylesheet">
	<link href="../../bootstrap/extend/jasny-bootstrap/css/jasny-bootstrap-responsive.min.css" rel="stylesheet">
	<link href="../../bootstrap/extend/bootstrap-wysihtml5/css/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet">
	
	<!-- JQueryUI v1.9.2 -->
	<link rel="stylesheet" href="../../theme/scripts/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.min.css" />
	
	<!-- Glyphicons -->
	<link rel="stylesheet" href="../../theme/css/glyphicons.css" />
	
	<!-- Bootstrap Extended -->
	<link rel="stylesheet" href="../../bootstrap/extend/bootstrap-select/bootstrap-select.css" />
	<link rel="stylesheet" href="../../bootstrap/extend/bootstrap-toggle-buttons/static/stylesheets/bootstrap-toggle-buttons.css" />
	
	<!-- Uniform -->
	<link rel="stylesheet" media="screen" href="../../theme/scripts/pixelmatrix-uniform/css/uniform.default.css" />

	<!-- JQuery v1.8.2 -->
	<script src="../../theme/scripts/jquery-1.8.2.min.js"></script>
	
	<!-- Modernizr -->
	<script src="../../theme/scripts/modernizr.custom.76094.js"></script>
	
	<!-- MiniColors -->
	<link rel="stylesheet" media="screen" href="../../theme/scripts/jquery-miniColors/jquery.miniColors.css" />
	
	<!-- Notyfy -->
	<script type="text/javascript" src="../../theme/scripts/notyfy/jquery.notyfy.js"></script>
	<link rel="stylesheet" href="../../theme/scripts/notyfy/jquery.notyfy.css"/>
	<link rel="stylesheet" href="../../theme/scripts/notyfy/themes/default.css"/>
	
	<!-- Gritter -->
	<link rel="stylesheet" href="../../theme/scripts/Gritter/css/jquery.gritter.css"/>
	<script type="text/javascript" src="../../theme/scripts/Gritter/js/jquery.gritter.min.js"></script>
	

	<!-- google-code-prettify -->
	<link href="../../theme/scripts/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
	
	<!-- Theme -->
	<link rel="stylesheet" href="../../theme/css/style.min.css?1362656779" />
	
	<!-- LESS 2 CSS -->
	<script src="../../theme/scripts/less-1.3.3.min.js"></script>
	
</head>
<body>
	
	<!-- Start Content -->
	<div class="container-fluid documentation">
		
		<div class="navbar main">
			<a href="../../index.html?lang=en" class="appbrand"><span>Smashing Admin</span></a>
			
						
			<ul class="topnav pull-left tn1">
								<li class="hidden-phone">
					<a href="#themer" data-toggle="collapse" class="glyphicons eyedropper"><i></i><span>Themer</span></a>
					<div id="themer" class="collapse">
						<div class="wrapper">
							<span class="close2">&times; close</span>
							<h4>Themer <span>color options</span></h4>
							<ul>
								<li>Theme: <select id="themer-theme" class="pull-right"></select><div class="clearfix"></div></li>
								<li>Primary Color: <input type="text" data-type="minicolors" data-default="#ffffff" data-slider="hue" data-textfield="false" data-position="left" id="themer-primary-cp" /><div class="clearfix"></div></li>
								<li>
									<span class="link" id="themer-custom-reset">reset theme</span>
									<span class="pull-right"><label>advanced <input type="checkbox" value="1" id="themer-advanced-toggle" /></label></span>
								</li>
							</ul>
							<div id="themer-getcode" class="hide">
								<hr class="separator" />
								<button class="btn btn-primary btn-small pull-right btn-icon glyphicons download" id="themer-getcode-less"><i></i>Get LESS</button>
								<button class="btn btn-inverse btn-small pull-right btn-icon glyphicons download" id="themer-getcode-css"><i></i>Get CSS</button>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</li>
								<li class="hidden-phone">
					<a href="#" data-toggle="dropdown"><img src="../../theme/images/lang/en.png" alt="en" /></a>
			    	<ul class="dropdown-menu pull-left">
			      		<li class="active"><a href="?page=documentation&amp;section=customization-guide&amp;ss=tables&amp;lang=en" title="English"><img src="../../theme/images/lang/en.png" alt="English"> English</a></li>
			      		<li><a href="?page=documentation&amp;section=customization-guide&amp;ss=tables&amp;lang=ro" title="Romanian"><img src="../../theme/images/lang/ro.png" alt="Romanian"> Romanian</a></li>
			      		<li><a href="?page=documentation&amp;section=customization-guide&amp;ss=tables&amp;lang=it" title="Italian"><img src="../../theme/images/lang/it.png" alt="Italian"> Italian</a></li>
			      		<li><a href="?page=documentation&amp;section=customization-guide&amp;ss=tables&amp;lang=fr" title="French"><img src="../../theme/images/lang/fr.png" alt="French"> French</a></li>
			      		<li><a href="?page=documentation&amp;section=customization-guide&amp;ss=tables&amp;lang=pl" title="Polish"><img src="../../theme/images/lang/pl.png" alt="Polish"> Polish</a></li>
			    	</ul>
				</li>
			</ul>
			
			<ul class="topnav pull-right">
				<li class="visible-desktop">
					<ul class="notif">
						<li><a href="" class="glyphicons envelope" data-toggle="tooltip" data-placement="bottom" data-original-title="5 new messages"><i></i> 5</a></li>
						<li><a href="" class="glyphicons shopping_cart" data-toggle="tooltip" data-placement="bottom" data-original-title="1 new orders"><i></i> 1</a></li>
						<li><a href="" class="glyphicons log_book" data-toggle="tooltip" data-placement="bottom" data-original-title="3 new activities"><i></i> 3</a></li>
					</ul>
				</li>
				<li class="dropdown visible-desktop">
					<a href="" data-toggle="dropdown" class="glyphicons cogwheel"><i></i>Dropdown <span class="caret"></span></a>
					<ul class="dropdown-menu pull-right">
						<li><a href="">Some option</a></li>
						<li><a href="">Some other option</a></li>
						<li><a href="">Other option</a></li>
					</ul>
				</li>
				
				<li class="account">
										<a data-toggle="dropdown" href="../../my_account.html?lang=en" class="glyphicons logout lock"><span class="hidden-phone text">mosaicpro</span><i></i></a>
					<ul class="dropdown-menu pull-right">
						<li><a href="../../my_account.html?lang=en" class="glyphicons cogwheel">Settings<i></i></a></li>
						<li><a href="../../my_account.html?lang=en" class="glyphicons camera">My Photos<i></i></a></li>
						<li class="highlight profile">
							<span>
								<span class="heading">Profile <a href="../../my_account.html?lang=en" class="pull-right">edit</a></span>
								<span class="img"></span>
								<span class="details">
									<a href="../../my_account.html?lang=en">Mosaic Pro</a>
									contact@mosaicpro.biz
								</span>
								<span class="clearfix"></span>
							</span>
						</li>
						<li>
							<span>
								<a class="btn btn-default btn-small pull-right" style="padding: 2px 10px; background: #fff;" href="../../login.html?lang=en">Sign Out</a>
							</span>
						</li>
					</ul>
									</li>
			</ul>
		</div>
		
		<div style="padding: 20px;">

<!-- Documentation -->
<section class="documentation">
	<div class="row-fluid">
		<div class="span9">
				
			<!-- Documentation CONTENT -->
			<h1>Customization Guide</h1>
<hr class="separator bottom" />

<ul class="nav nav-tabs">
	<!-- <li><a href="../../documentation/customization-guide.html?lang=en" title="">Overview</a></li> 
	<li><a href="../../documentation/customization-guide/typography.html?lang=en" title="">Typography</a></li> -->
	<li><a href="../../documentation/customization-guide/grid-system.html?lang=en">Grid system</a></li>
	<li><a href="../../documentation/customization-guide/buttons.html?lang=en" title="">Buttons</a></li>
	<li><a href="../../documentation/customization-guide/icons.html?lang=en" title="">Icons</a></li>
	<li class="active"><a href="../../documentation/customization-guide/tables.html?lang=en" title="">Tables</a></li>
	<li><a href="../../documentation/customization-guide/widgets.html?lang=en" title="">Widgets</a></li>
	<li><a href="../../documentation/customization-guide/tabs.html?lang=en" title="">Tabs</a></li>
	<li><a href="../../documentation/customization-guide/elements.html?lang=en" title="">Other</a></li>
</ul>

<div class="row-fluid">
<div class="span6">
	<div class="relativeWrap">
	<div class="widget widget-gray ">
		<div class="widget-head"><h4 class="heading">Minimal Condensed Table</h4></div>
		<div class="widget-body">
			<table class="table table-condensed">
				<thead>
					<tr>
						<th width="50" class="center">No.</th>
						<th>Column Heading</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="center">1</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">2</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">3</td>
						<td>Lorem ipsum dolor</td>
					</tr>
				</tbody>
			</table><br/>
<pre class="prettyprint">
&lt;table class="table <strong>table-condensed</strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;
</pre>
		</div>
	</div>
	</div>
	<div class="relativeWrap">
	<div class="widget widget-gray ">
		<div class="widget-head"><h4 class="heading">Bordered Table</h4></div>
		<div class="widget-body">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th width="50" class="center">No.</th>
						<th>Column Heading</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="center">1</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">2</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">3</td>
						<td>Lorem ipsum dolor</td>
					</tr>
				</tbody>
			</table><br/>
<pre class="prettyprint">
&lt;table class="table <strong>table-bordered</strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;
</pre>
		</div>
	</div>
	</div>
</div>
<div class="span6">
	<div class="relativeWrap">
	<div class="widget widget-gray ">
		<div class="widget-head"><h4 class="heading">Bordered &amp; Condensed Table</h4></div>
		<div class="widget-body">
			<table class="table table-bordered table-condensed">
				<thead>
					<tr>
						<th width="50" class="center">No.</th>
						<th>Column Heading</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="center">1</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">2</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">3</td>
						<td>Lorem ipsum dolor</td>
					</tr>
				</tbody>
			</table><br/>
<pre class="prettyprint">
&lt;table class="table <strong>table-bordered table-condensed</strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;
</pre>
		</div>
	</div>
	</div>
	
	<div class="relativeWrap">
	<div class="widget widget-gray ">
		<div class="widget-head"><h4 class="heading">Striped &amp; Bordered Table</h4></div>
		<div class="widget-body">
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th width="50" class="center">No.</th>
						<th>Column Heading</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="center">1</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">2</td>
						<td>Lorem ipsum dolor</td>
					</tr>
					<tr>
						<td class="center">3</td>
						<td>Lorem ipsum dolor</td>
					</tr>
				</tbody>
			</table><br/>
<pre class="prettyprint">
&lt;table class="table <strong>table-striped table-bordered</strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;
</pre>
		</div>
	</div>
	</div>
</div>
</div>

<div class="relativeWrap">
<div class="widget widget-gray ">
	<div class="widget-head">
		<h4 class="heading">Primary Bordered Table</h4>
	</div>
	<div class="widget-body">
		<table class="table table-bordered table-primary">
			<thead>
				<tr>
					<th width="50" class="center">No.</th>
					<th>Column Heading</th>
					<th>Column Heading</th>
					<th>Column Heading</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="center">1</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
				</tr>
				<tr>
					<td class="center">2</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
				</tr>
				<tr>
					<td class="center">3</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
				</tr>
			</tbody>
		</table><br/>
<pre class="prettyprint">
&lt;table class="table <strong>table-primary table-bordered</strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;
</pre>
	</div>
</div>
</div>

<div class="relativeWrap">
<div class="widget widget-gray ">
	<div class="widget-head">
		<h4 class="heading">Primary Bordered &amp; Condensed Table</h4>
	</div>
	<div class="widget-body">
		<table class="table table-bordered table-primary table-condensed">
			<thead>
				<tr>
					<th width="50" class="center">No.</th>
					<th>Column Heading</th>
					<th>Column Heading</th>
					<th>Column Heading</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="center">1</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
				</tr>
				<tr>
					<td class="center">2</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
				</tr>
				<tr>
					<td class="center">3</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
					<td>Lorem ipsum dolor</td>
				</tr>
			</tbody>
		</table><br/>
<pre class="prettyprint">
&lt;table class="table <strong>table-primary table-condensed table-bordered</strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;
</pre>
	</div>
</div>
</div>

<div class="relativeWrap">
<div class="widget widget-gray widget-body-white">
	<div class="widget-head">
		<h4 class="heading">Primary Minimal Borderless Table</h4>
	</div>
	<div class="widget-body">
		<table
			class="table table-condensed table-primary table-vertical-center table-thead-simple">
			<thead>
				<tr>
					<th class="center" width="1%">No.</th>
					<th>Transaction</th>
					<th width="100" class="center">Date</th>
					<th width="100" class="center">Amount</th>
					<th width="100" class="right">Actions</th>
				</tr>
			</thead>
			<tbody>
				<tr class="selectable">
					<td class="center">1</td>
					<td class="important"><span
						class="glyphicons down_arrow btn-danger btn-action single"><i></i> </span>Amazon
						Web Services</td>
					<td class="center"><span class="label label-important">23 Jan 2013</span>
					</td>
					<td class="center">&euro;523.00</td>
					<td class="right actions"><a href="#"
						class="btn-action glyphicons eye_open btn-info"><i></i> </a> <a
						href="#" class="btn-action glyphicons pencil btn-success"><i></i> </a>
						<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i>
					</a>
					</td>
				</tr>
				<tr class="selectable">
					<td class="center">2</td>
					<td class="important"><span
						class="glyphicons up_arrow btn-success btn-action single"><i></i> </span>ThemeForest</td>
					<td class="center"><span class="label label-important">23 Jan 2013</span>
					</td>
					<td class="center">&euro;753.00</td>
					<td class="right actions"><a href="#"
						class="btn-action glyphicons eye_open btn-info"><i></i> </a> <a
						href="#" class="btn-action glyphicons pencil btn-success"><i></i> </a>
						<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i>
					</a>
					</td>
				</tr>
				<tr class="selectable">
					<td class="center">3</td>
					<td class="important"><span
						class="glyphicons down_arrow btn-danger btn-action single"><i></i> </span>Amazon
						Web Services</td>
					<td class="center"><span class="label label-important">23 Jan 2013</span>
					</td>
					<td class="center">&euro;179.00</td>
					<td class="right actions"><a href="#"
						class="btn-action glyphicons eye_open btn-info"><i></i> </a> <a
						href="#" class="btn-action glyphicons pencil btn-success"><i></i> </a>
						<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i>
					</a>
					</td>
				</tr>
				<tr class="selectable">
					<td class="center">4</td>
					<td class="important"><span
						class="glyphicons down_arrow btn-danger btn-action single"><i></i> </span>Amazon
						Web Services</td>
					<td class="center"><span class="label label-important">23 Jan 2013</span>
					</td>
					<td class="center">&euro;665.00</td>
					<td class="right actions"><a href="#"
						class="btn-action glyphicons eye_open btn-info"><i></i> </a> <a
						href="#" class="btn-action glyphicons pencil btn-success"><i></i> </a>
						<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i>
					</a>
					</td>
				</tr>
				<tr class="selectable">
					<td class="center">5</td>
					<td class="important"><span
						class="glyphicons up_arrow btn-success btn-action single"><i></i> </span>Supplier
						Abc Xyz</td>
					<td class="center"><span class="label label-important">23 Jan 2013</span>
					</td>
					<td class="center">&euro;262.00</td>
					<td class="right actions"><a href="#"
						class="btn-action glyphicons eye_open btn-info"><i></i> </a> <a
						href="#" class="btn-action glyphicons pencil btn-success"><i></i> </a>
						<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i>
					</a>
					</td>
				</tr>
				<tr class="selectable">
					<td class="center">6</td>
					<td class="important"><span
						class="glyphicons down_arrow btn-danger btn-action single"><i></i> </span>ThemeForest</td>
					<td class="center"><span class="label label-important">23 Jan 2013</span>
					</td>
					<td class="center">&euro;351.00</td>
					<td class="right actions"><a href="#"
						class="btn-action glyphicons eye_open btn-info"><i></i> </a> <a
						href="#" class="btn-action glyphicons pencil btn-success"><i></i> </a>
						<a href="#" class="btn-action glyphicons remove_2 btn-danger"><i></i>
					</a>
					</td>
				</tr>
			</tbody>
		</table><br/>
<pre class="prettyprint">
&lt;table class="table table-condensed table-vertical-center <strong>table-primary table-thead-simple</strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt; ... &lt;/tbody&gt;
&lt;/table&gt;
</pre>
	</div>
</div>
</div>

<h4>Responsive Tables</h4>
<hr class="separator bottom" />

<p>This theme supports responsive large data tables with many columns that fit perfectly to any device screen. This documentation uses responsive tables, so to see it in action go ahead and resize you browser window and check the <em>Buttons</em> section bellow, under <strong>Navigation</strong>.</p>
<p>There are many different methods to achieve responsive tables in the wild, but we picked <strong>the top two</strong> most finest techniques to date that make a great UX for this purpose. Your mobile users will love these.</p>
<br/>

<div class="row-fluid">
	<div class="span4">
		<h5>Regular Non-Responsive Table on mobile device screen</h5>
		<hr class="separator bottom" />
		<a href="../../theme/images/docs/mobile-responsive-tables-regular.PNG" target="_blank" class="thumb" style="padding: 5px; margin: 0 0 10px;"><img src="../../theme/images/docs/mobile-responsive-tables-regular.PNG" /></a>
		<p>This figure describes the problem: We have a big table that doesn't fit on device screen.</p>
	</div>
	<div class="span4">
		<h5>Method one: Horizontal Swipe Table (originally <em>Flip Scroll</em>)</h5>
		<hr class="separator bottom" />
		<a href="../../theme/images/docs/mobile-responsive-tables-horizontal-swipe.PNG" target="_blank" class="thumb" style="padding: 5px; margin: 0 0 10px;"><img src="../../theme/images/docs/mobile-responsive-tables-horizontal-swipe.PNG" /></a>
		<p>This technique was first published by <a href="http://dbushell.com/" target="_blank">David Bushell</a> and it features horizontal scrolling. A sample usage context could be a comparison table.</p>
	</div>
	<div class="span4">
		<h5>Method two: Block Table (originally <em>No More Tables</em>)</h5>
		<hr class="separator bottom" />
		<a href="../../theme/images/docs/mobile-responsive-tables-block.PNG" target="_blank" class="thumb" style="padding: 5px; margin: 0 0 10px;"><img src="theme/images/docs/mobile-responsive-tables-block.PNG" /></a>
		<p>This technique was first published by <a href="http://chriscoyier.net/" target="_blank">Chris Coyier</a>. This time there is no horizontal scroll, instead it forces tables to act differently.</p>
	</div>
</div>
<br/>

<h4>Using Responsive Tables</h4>
<hr class="separator bottom" />
			
<pre class="prettyprint">
&lt;!-- Method one: Horizontal Swiping --&gt;
&lt;table class="table <strong>table-responsive <em>swipe-horizontal</em></strong>"&gt;

&lt;!-- Method two: Block --&gt;

<strong>Note:</strong> 	This method makes use of HTML5 <em>data-*</em> attribute, in our case <strong>data-title</strong> 
	and it <strong>must</strong> be set on each table's column, the <em>&lt;td&gt; element;</em>
	This is perfectly valid HTML5;
	
&lt;table class="table <strong>table-responsive <em>block</em></strong>"&gt;
	&lt;thead&gt; ... &lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td data-title="Heading #1"&gt;Column #1&lt;/td&gt;
			&lt;td data-title="Heading #2"&gt;Column #2&lt;/td&gt;
			...
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;
</pre>

<br/>			<!-- Documentation CONTENT END -->
				
		</div>
		<div class="span3">
			<div class="widget widget-2 primary widget-body-white">
				<div class="widget-head">
					<h4 class="heading glyphicons circle_question_mark"><i></i> Documentation</h4>
				</div>
				<div class="widget-body list list-2">
					<ul>
						<li><a href="../../documentation.html?lang=en" title="" class="glyphicons link"><i></i>Overview</a></li>
						<li class="hasSubmenu">
							<a href="../../documentation/getting-started/files.html?lang=en" title="" class="glyphicons link"><i></i>Getting Started</a>
							<ul>
								<li><a href="../../documentation/getting-started/files.html?lang=en" title="">What's in the package</a></li>
								<li><a href="../../documentation/getting-started/config.html?lang=en" title="">Configuration</a></li>
								<li><a href="../../documentation/getting-started/lang.html?lang=en" title="">Translations</a></li>
							</ul>
						</li>
						<li class="hasSubmenu active">
							<a href="../../documentation/customization-guide/grid-system.html?lang=en" title="" class="glyphicons link"><i></i>Customization Guide</a>
							<ul>
								<li><a href="../../documentation/customization-guide/grid-system.html?lang=en" title="">Grid System</a></li>
								<li><a href="../../documentation/customization-guide/buttons.html?lang=en" title="">Buttons</a></li>
								<li><a href="../../documentation/customization-guide/icons.html?lang=en" title="">Icons</a></li>
								<li class="active"><a href="../../documentation/customization-guide/tables.html?lang=en" title="">Tables</a></li>
								<li><a href="../../documentation/customization-guide/widgets.html?lang=en" title="">Widgets</a></li>
								<li><a href="../../documentation/customization-guide/tabs.html?lang=en" title="">Tabs</a></li>
								<li><a href="../../documentation/customization-guide/elements.html?lang=en" title="">Other</a></li>
							</ul>
						</li>
						<li><a href="../../documentation/credits.html?lang=en" title="" class="glyphicons link"><i></i>Credits</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Documentation END -->

</div>		
				
	</div>
	
	<!-- JQueryUI v1.9.2 -->
	<script src="../../theme/scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
	
	<!-- JQueryUI Touch Punch -->
	<!-- small hack that enables the use of touch events on sites using the jQuery UI user interface library -->
	<script src="../../theme/scripts/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
	
	<!-- MiniColors -->
	<script src="../../theme/scripts/jquery-miniColors/jquery.miniColors.js"></script>
	
	<!-- Themer -->
	<script>
	var themerPrimaryColor = '#47759e';
	</script>
	<script src="../../theme/scripts/jquery.cookie.js"></script>
	<script src="../../theme/scripts/themer.js"></script>
	
	
	
	<!-- Resize Script -->
	<script src="../../theme/scripts/jquery.ba-resize.js"></script>
	
	<!-- Uniform -->
	<script src="../../theme/scripts/pixelmatrix-uniform/jquery.uniform.min.js"></script>
	
	<!-- Bootstrap Script -->
	<script src="../../bootstrap/js/bootstrap.min.js"></script>
	
	<!-- Bootstrap Extended -->
	<script src="../../bootstrap/extend/bootstrap-select/bootstrap-select.js"></script>
	<script src="../../bootstrap/extend/bootstrap-toggle-buttons/static/js/jquery.toggle.buttons.js"></script>
	<script src="../../bootstrap/extend/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js"></script>
	<script src="../../bootstrap/extend/jasny-bootstrap/js/jasny-bootstrap.min.js" type="text/javascript"></script>
	<script src="../../bootstrap/extend/jasny-bootstrap/js/bootstrap-fileupload.js" type="text/javascript"></script>
	<script src="../../bootstrap/extend/bootbox.js" type="text/javascript"></script>
	<script src="../../bootstrap/extend/bootstrap-wysihtml5/js/wysihtml5-0.3.0_rc2.min.js" type="text/javascript"></script>
	<script src="../../bootstrap/extend/bootstrap-wysihtml5/js/bootstrap-wysihtml5-0.0.2.js" type="text/javascript"></script>
	
	<!-- Custom Onload Script -->
	<script src="../../theme/scripts/load.js"></script>
	
	

<!-- google-code-prettify -->
<script src="../../theme/scripts/google-code-prettify/prettify.js"></script>
<script>
$(function(){
	if ($('.prettyprint').length)
		prettyPrint();
});
</script>
	
</body>
</html>